const { DefinePlugin } = require("webpack");
const chalk = require("chalk");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");

module.exports = {
  entry: {
    app: ["./src/index.js", './public/index.html'], // 相对路径（相对 context）
  },
  // context: '', 项目根目录

  module: {
    rules: [
      {
        test: /.(png|jpe?g|svg|gif)$/,
        type: 'asset', // 使用 webpack5 解析图片资源
        generator: {
          filename: "images/[name].[hash:4][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 25 * 1024  // 大于 25k 直接打复制到 dist/img 目录中(file-loader)，小于 25k 内置到 index.html(url-loader)
          }
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,//加载视频资源
        type: 'asset', // 使用 webpack5 解析图片资源
        generator: {
          filename: "images/[name].[hash:4][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 244 * 1024  // 大于 25k 直接打复制到 dist/img 目录中(file-loader)，小于 25k 内置到 index.html(url-loader)
          }
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 加载字体资源
        type: 'asset/resource',
        generator: {
          filename: "font/[name].[hash:4][ext]"
        },
      },
      {
        test: /.js$/,
        use: ["babel-loader"],
        exclude: /node_modules/
      },
      {
        test: /.html$/,
        use: ["html-loader"],
      }
    ],
  },
  plugins: [
    // new htmlWebpackPlugin({
    //   title: "webpack 搭建项目",
    //   template: "./public/index.html",
    //   minify: {
    //     collapseWhitespace: process.env.NODE_ENV === 'production' ? true : false, //合并多余的空格
    //     removeComments: process.env.NODE_ENV === 'production' ? true : false, //移除注释
    //     removeAttributeQuotes: process.env.NODE_ENV === 'production' ? true : false, //移除属性上的双引号
    //   }
    // }),
    new DefinePlugin({
      // 为 index.html 传递常量参数
      BASE_URL: process.env.NODE_ENV === 'production' ? "./public/" : "./",

    }),
    new ProgressBarPlugin({ // 使用进度条显示构建进度
      format: ` :msg [:bar] ${chalk.green.bold(':percent')} (:elapsed s)`
    })
  ],

};
